<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>PC 端扩展 | MuiPlayer</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/mui-player.min.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/CommentCoreLibrary.min.css">
    <link rel="apple-touch-icon" href="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logo_solid.png">
    <script src="https://www.googletagmanager.com/gtag/js?id=G-X4RSEE27EY"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-X4RSEE27EY');
        </script>
    <script src="/plugin/flv.min.js"></script>
    <script src="/plugin/hls.min.js"></script>
    <script src="/js/mui-player.min.js"></script>
    <script src="/js/CommentCoreLibrary.min.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <meta name="description" content="Mui Player 是一款优秀的 HTML5 网页视频播放器框架，提供全屏播放，播放快进，视频弹幕，解码等最常用的视频播放功能">
    <meta name="charset" content="utf-8">
    <meta name="baidu-site-verification" content="code-AdGRxnQ9NZ">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta property="og:site_name" content="MuiPlayer">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/mobile_preview.png">
    <meta name="theme-color" content="#FFFFFF">
    <meta property="og:title" content="">
    <meta property="og:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta property="og:url" content="https://muiplayer.js.org/">
    <meta property="og:locale" content="en-US">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="keywords" content="HTML5 video, player, hls, danmaku, adaptive-bitrate, muiplayer">
    
    <link rel="preload" href="/assets/css/0.styles.ae6ed136.css" as="style"><link rel="preload" href="/assets/js/app.3641bd26.js" as="script"><link rel="preload" href="/assets/js/23.35f66f6c.js" as="script"><link rel="preload" href="/assets/js/3.67a24b41.js" as="script"><link rel="preload" href="/assets/js/57.5d073ed4.js" as="script"><link rel="preload" href="/assets/js/15.78fdfcaf.js" as="script"><link rel="prefetch" href="/assets/js/1.54927c41.js"><link rel="prefetch" href="/assets/js/10.dd4adaf8.js"><link rel="prefetch" href="/assets/js/11.ea997365.js"><link rel="prefetch" href="/assets/js/12.01af38a6.js"><link rel="prefetch" href="/assets/js/13.75800705.js"><link rel="prefetch" href="/assets/js/14.9fc60c4c.js"><link rel="prefetch" href="/assets/js/16.0101612c.js"><link rel="prefetch" href="/assets/js/17.a9b41ba5.js"><link rel="prefetch" href="/assets/js/18.a55912b8.js"><link rel="prefetch" href="/assets/js/19.13ce6fb6.js"><link rel="prefetch" href="/assets/js/20.57cf3163.js"><link rel="prefetch" href="/assets/js/21.a9f966ac.js"><link rel="prefetch" href="/assets/js/22.65e9060e.js"><link rel="prefetch" href="/assets/js/24.3adbb4ca.js"><link rel="prefetch" href="/assets/js/25.00421a1d.js"><link rel="prefetch" href="/assets/js/26.ba6e1ac8.js"><link rel="prefetch" href="/assets/js/27.4e1b228b.js"><link rel="prefetch" href="/assets/js/28.2d7617cb.js"><link rel="prefetch" href="/assets/js/29.ff74fd8e.js"><link rel="prefetch" href="/assets/js/30.ff8d825c.js"><link rel="prefetch" href="/assets/js/31.daa6ba5b.js"><link rel="prefetch" href="/assets/js/32.9eac0031.js"><link rel="prefetch" href="/assets/js/33.32a2153a.js"><link rel="prefetch" href="/assets/js/34.da24de19.js"><link rel="prefetch" href="/assets/js/35.c97bfd00.js"><link rel="prefetch" href="/assets/js/36.3fd6a073.js"><link rel="prefetch" href="/assets/js/37.262c376a.js"><link rel="prefetch" href="/assets/js/38.2bd8c4ba.js"><link rel="prefetch" href="/assets/js/39.618c3695.js"><link rel="prefetch" href="/assets/js/4.9edd66f8.js"><link rel="prefetch" href="/assets/js/40.0502620b.js"><link rel="prefetch" href="/assets/js/41.9a3bd9b3.js"><link rel="prefetch" href="/assets/js/42.8ac30a45.js"><link rel="prefetch" href="/assets/js/43.e3fc5609.js"><link rel="prefetch" href="/assets/js/44.9acf05da.js"><link rel="prefetch" href="/assets/js/45.8c740c98.js"><link rel="prefetch" href="/assets/js/46.250aba22.js"><link rel="prefetch" href="/assets/js/47.83ee64f1.js"><link rel="prefetch" href="/assets/js/48.8d559ee8.js"><link rel="prefetch" href="/assets/js/49.6eeaca4b.js"><link rel="prefetch" href="/assets/js/5.35f74ec6.js"><link rel="prefetch" href="/assets/js/50.6e5e287b.js"><link rel="prefetch" href="/assets/js/51.ff3ae70a.js"><link rel="prefetch" href="/assets/js/52.378b3b20.js"><link rel="prefetch" href="/assets/js/53.868673eb.js"><link rel="prefetch" href="/assets/js/54.3c62a57a.js"><link rel="prefetch" href="/assets/js/55.035ed35d.js"><link rel="prefetch" href="/assets/js/56.08925c33.js"><link rel="prefetch" href="/assets/js/58.dce950e6.js"><link rel="prefetch" href="/assets/js/59.092c0de9.js"><link rel="prefetch" href="/assets/js/6.30b43e5d.js"><link rel="prefetch" href="/assets/js/60.8526ebe1.js"><link rel="prefetch" href="/assets/js/61.c02d2349.js"><link rel="prefetch" href="/assets/js/62.b93eeaf2.js"><link rel="prefetch" href="/assets/js/63.b363131d.js"><link rel="prefetch" href="/assets/js/64.0cda51e1.js"><link rel="prefetch" href="/assets/js/65.d26b33ae.js"><link rel="prefetch" href="/assets/js/66.d07350b7.js"><link rel="prefetch" href="/assets/js/67.85653372.js"><link rel="prefetch" href="/assets/js/7.7232d571.js"><link rel="prefetch" href="/assets/js/8.772a3a10.js"><link rel="prefetch" href="/assets/js/9.5f308baf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ae6ed136.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/zh/" class="home-link router-link-active"><!----> <span class="site-name">MuiPlayer</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/zh/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/zh/demo/" class="nav-link">
  演示
</a></div><div class="nav-item"><a href="/zh/joinUs/" class="nav-link">
  下载
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="选择语言" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="选择语言" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/mui-player-desktop-plugin.html" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/mui-player-desktop-plugin.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/zh/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/zh/demo/" class="nav-link">
  演示
</a></div><div class="nav-item"><a href="/zh/joinUs/" class="nav-link">
  下载
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="选择语言" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="选择语言" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/mui-player-desktop-plugin.html" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/mui-player-desktop-plugin.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/zh/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/zh/guide/begin.html" class="sidebar-link">快速开始</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/begin.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/zh/guide/begin.html#使用" class="sidebar-link">使用</a></li></ul></li><li><a href="/zh/guide/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/api.html#主要配置" class="sidebar-link">主要配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/api.html#自定义配置" class="sidebar-link">自定义配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/api.html#播放事件监听" class="sidebar-link">播放事件监听</a></li><li class="sidebar-sub-header"><a href="/zh/guide/api.html#播放器接口" class="sidebar-link">播放器接口</a></li></ul></li><li><a href="/zh/guide/mui-player-desktop-plugin.html" aria-current="page" class="active sidebar-link">PC 端扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#开始使用" class="sidebar-link">开始使用</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#配置选项" class="sidebar-link">配置选项</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#自定义设置组配置" class="sidebar-link">自定义设置组配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#自定义右键菜单" class="sidebar-link">自定义右键菜单</a></li><li class="sidebar-sub-header"><a href="/zh/guide/mui-player-desktop-plugin.html#动作事件监听" class="sidebar-link">动作事件监听</a></li></ul></li><li><a href="/zh/guide/plus-desktop-plugin.html" class="sidebar-link">PC 端扩展【专业版】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#下载" class="sidebar-link">下载</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#开始使用" class="sidebar-link">开始使用</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#配置选项-plus" class="sidebar-link">配置选项 Plus</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-desktop-plugin.html#接口-plus" class="sidebar-link">接口 Plus</a></li></ul></li><li><a href="/zh/guide/plus-mobile-plugin.html" class="sidebar-link">移动端扩展【专业版】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#扫码演示" class="sidebar-link">扫码演示</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#下载" class="sidebar-link">下载</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#开始使用" class="sidebar-link">开始使用</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#配置选项" class="sidebar-link">配置选项</a></li><li class="sidebar-sub-header"><a href="/zh/guide/plus-mobile-plugin.html#动作事件监听" class="sidebar-link">动作事件监听</a></li></ul></li><li><a href="/zh/guide/preset.html" class="sidebar-link">MediaSource 支持</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/preset.html#使用-hls-js-或者-flv-js" class="sidebar-link">使用 hls.js 或者 flv.js</a></li><li class="sidebar-sub-header"><a href="/zh/guide/preset.html#配置" class="sidebar-link">配置</a></li><li class="sidebar-sub-header"><a href="/zh/guide/preset.html#自定义使用mse库" class="sidebar-link">自定义使用MSE库</a></li></ul></li><li><a href="/zh/guide/thumbnails.html" class="sidebar-link">视频缩略图</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/zh/guide/barrage.html" class="sidebar-link">视频弹幕</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/barrage.html#使用-commentcorelibrary" class="sidebar-link">使用 CommentCoreLibrary</a></li></ul></li><li><a href="/zh/guide/subtitle.html" class="sidebar-link">视频字幕</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/zh/guide/custom-control.html" class="sidebar-link">自定义播放器控件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#配置选项" class="sidebar-link">配置选项</a></li><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#示例一-自定义播放器头按钮" class="sidebar-link">示例一：自定义播放器头按钮</a></li><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#示例二-自定义播放器底部按钮" class="sidebar-link">示例二：自定义播放器底部按钮</a></li><li class="sidebar-sub-header"><a href="/zh/guide/custom-control.html#示例三-自定义右侧栏弹出窗口" class="sidebar-link">示例三：自定义右侧栏弹出窗口</a></li></ul></li><li><a href="/zh/guide/uni-app.html" class="sidebar-link">在 uni-app 中使用</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/zh/guide/other-problem.html" class="sidebar-link">其他问题</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="pc-端扩展"><a href="#pc-端扩展" class="header-anchor">#</a> PC 端扩展</h1> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>mui-player-desktop-plugin.js 是播放器扩展插件，该扩展插件增强了播放器在pc端应用场景的使用，提供了包括鼠标以及键盘对播放器的控制能力，设置组，音量调节，视频缩略图配置等功能组件。</p></div> <!----> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <p>使用 npm 安装：</p> <div class="language- extra-class"><pre class="language-text"><code>npm i mui-player-desktop-plugin
</code></pre></div><p>使用 yarn 安装：</p> <div class="language- extra-class"><pre class="language-text"><code>yarn add mui-player-desktop-plugin
</code></pre></div><h2 id="开始使用"><a href="#开始使用" class="header-anchor">#</a> 开始使用</h2> <p>在页面引入 <strong>mui-player-desktop-plugin.js</strong>，插件需要在初始化播放器之前加载</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 script 标签引入 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>js/mui-player-desktop-plugin.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 使用模块管理器引入插件</span>
<span class="token keyword">import</span> MuiPlayerDesktopPlugin <span class="token keyword">from</span> <span class="token string">'mui-player-desktop-plugin'</span>
</code></pre></div><p>在主配置项 plugins 中传入</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container<span class="token operator">:</span><span class="token string">'#mui-player'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span><span class="token string">'../media/media.mp4'</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>

    plugins<span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            customSetting<span class="token punctuation">,</span> <span class="token comment">// 设置组配置</span>
            contextmenu<span class="token punctuation">,</span> <span class="token comment">// 右键菜单组配置</span>
            thumbnails<span class="token punctuation">,</span>  <span class="token comment">// 缩略图配置</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="配置选项"><a href="#配置选项" class="header-anchor">#</a> 配置选项</h2> <p>扩展插件可配置API</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>customSetting</td> <td>Array</td> <td>{functions:'循环播放',<br>name:'loopPlay'}<br><br>{functions:'播放速度',<br>name:'playbackRate'}</td> <td>自定义设置组，<a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AE%BE%E7%BD%AE%E7%BB%84%E9%85%8D%E7%BD%AE">参见</a></td></tr> <tr><td>customSetting.functions</td> <td>String</td> <td></td> <td>组名称</td></tr> <tr><td>customSetting.name</td> <td>String</td> <td></td> <td>组标识名。如该名称与默认配置组中某个名称相同，那么将重写默认配置组菜单</td></tr> <tr><td>customSetting.model</td> <td>String</td> <td>select</td> <td>组选择模式，可选 switch | select</td></tr> <tr><td>customSetting.selected</td> <td>Boolean</td> <td>false</td> <td>默认是否选中当前选择项</td></tr> <tr><td>customSetting.show</td> <td>Boolean</td> <td>true</td> <td>是否显示</td></tr> <tr><td>customSetting.zIndex</td> <td>Number</td> <td>0</td> <td>组显示层级，zIndex越大该组排列顺序越靠前</td></tr> <tr><td>customSetting.childConfig</td> <td>Array</td> <td>[]</td> <td>子设置组配置，配置参数同父级设置组参数</td></tr> <tr><td>customSetting.onToggle</td> <td>Function</td> <td>callback(<br>data,<br>selected,<br>back)</td> <td>组选项点击后的回调函数，接收三个参数可供处理动作：<br>1、data：当前选择配置项<br>2、selected： 函数，必须手动调用该函数来选择项目<br>3、back： 函数，调用该函数触发返回父级设置组，参数可接收一个毫秒单位的数字表示延迟返回</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>contextmenu</td> <td>Array</td> <td>{name:'shortcuts',<br>context:'快捷键'},<br><br>{name:'muiplayer',<br>context:'MuiPlayer'}</td> <td>自定义右键菜单，<a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95">参考</a></td></tr> <tr><td>contextmenu.name</td> <td>String</td> <td></td> <td>菜单标识名，如该名称与右击菜单组中某个名称相同，那么将重写默认菜单组</td></tr> <tr><td>contextmenu.context</td> <td>String</td> <td></td> <td>右击菜单名称</td></tr> <tr><td>contextmenu.zIndex</td> <td>Number</td> <td></td> <td>组显示层级，zIndex越大该组排列顺序越靠前</td></tr> <tr><td>contextmenu.show</td> <td>Boolean</td> <td></td> <td>是否显示</td></tr> <tr><td>contextmenu.click</td> <td>Function</td> <td>callback(close)</td> <td>点击后回调函数。【close：函数，主动调用函数可关闭右击菜单】</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>thumbnails</td> <td>Object</td> <td>{}</td> <td>缩略图配置，<a href="/zh/guide/thumbnails/">参见</a></td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>fullScaling</td> <td>Number</td> <td>1.2</td> <td>全屏时控件大小缩放比，取值 &gt;= 1</td></tr> <tr><td>leaveHiddenControls</td> <td>Boolean</td> <td>false</td> <td>鼠标指针移出播放器时是否隐藏控件</td></tr></tbody></table> <h2 id="自定义设置组配置"><a href="#自定义设置组配置" class="header-anchor">#</a> 自定义设置组配置</h2> <p>您可以自定义配置设置组以此来满足需要添加的菜单，设置菜单支持两种选择模式，分别是开关模式（switch）和选择模式（select）。</p> <p>播放器默认设置组包括循环播放以及播放速度的切换，在直播模式（live）下不支持。通过配置 customSetting Option 可自定义设置组，配置举例说明：</p> <p><strong>customSetting.js</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
	<span class="token punctuation">{</span>
		functions<span class="token operator">:</span><span class="token string">'清晰度'</span><span class="token punctuation">,</span>
		model<span class="token operator">:</span><span class="token string">'select'</span><span class="token punctuation">,</span>
		show<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
		zIndex<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>
		childConfig<span class="token operator">:</span><span class="token punctuation">[</span>
			<span class="token punctuation">{</span>functions<span class="token operator">:</span><span class="token string">'蓝光1080P'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token punctuation">{</span>functions<span class="token operator">:</span><span class="token string">'超清'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token punctuation">{</span>functions<span class="token operator">:</span><span class="token string">'高清'</span><span class="token punctuation">,</span>selected<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token punctuation">{</span>functions<span class="token operator">:</span><span class="token string">'标清'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">]</span><span class="token punctuation">,</span>
		<span class="token function-variable function">onToggle</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>selected<span class="token punctuation">,</span>back</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// Action</span>
        <span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>

</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> customSetting <span class="token keyword">from</span> <span class="token string">'./customSetting.js'</span>

<span class="token operator">...</span><span class="token operator">...</span>
<span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    customSetting<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="自定义右键菜单"><a href="#自定义右键菜单" class="header-anchor">#</a> 自定义右键菜单</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    contextmenu<span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            name<span class="token operator">:</span><span class="token string">'copyPlayUrl'</span><span class="token punctuation">,</span>
            context<span class="token operator">:</span><span class="token string">'复制视频链接'</span><span class="token punctuation">,</span>
            zIndex<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>
            show<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token function-variable function">click</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">close</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// Action...</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="动作事件监听"><a href="#动作事件监听" class="header-anchor">#</a> 动作事件监听</h2> <p>mui-player-desktop-plugin 提供如下特定的行为事件：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 网页全屏改变的触发</span>
mp<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'pagefull-change'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>pagefull<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th>事件名</th> <th>类型</th> <th>函数返回</th> <th>说明</th></tr></thead> <tbody><tr><td>pagefull-change</td> <td>EventHandle</td> <td>{ pagefull }</td> <td>网页全屏模式改变的触发</td></tr> <tr><td>pip-change</td> <td>EventHandle</td> <td>{ size }</td> <td>画中画模式改变时触发</td></tr></tbody></table></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/muiplayer/hello-muiplayer/edit/master/docs/docs/zh/guide/mui-player-desktop-plugin.md" target="_blank" rel="noopener noreferrer">帮助我们改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/1/23 上午1:09:21</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/zh/guide/api.html" class="prev">
        API
      </a></span> <span class="next"><a href="/zh/guide/plus-desktop-plugin.html">
        PC 端扩展【专业版】
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.3641bd26.js" defer></script><script src="/assets/js/23.35f66f6c.js" defer></script><script src="/assets/js/3.67a24b41.js" defer></script><script src="/assets/js/57.5d073ed4.js" defer></script><script src="/assets/js/15.78fdfcaf.js" defer></script>
  </body>
</html>
